<template>
  <div class="content">
    <el-form ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="经营模式" prop="model">
        <el-radio-group  v-model="form.model" >
          <el-radio v-for="item in code_manage_model" :value="item.dataValue">{{item.dataName}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否租用" prop="rent"  v-if="form.model == '1'">
        <el-radio-group  v-model="form.rent" >
          <el-radio value="0">否</el-radio>
          <el-radio value="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="租用类型" prop="rentType"  v-if="form.model == '1'  && form.rent=='1'">
        <el-radio-group  v-model="form.rentType" >
          <el-radio v-for="item in rent_type" :value="item.dataValue">{{item.dataName}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="租用开始日期" prop="rentStartDate" v-if="form.model == '1'  && form.rent=='1'">
        <el-date-picker v-if="form.rentType == '0'"  v-model="form.rentStartDate">
        </el-date-picker>
        <el-date-picker v-if="form.rentType == '1'" type="month"  v-model="form.rentStartDate">
        </el-date-picker>
        <el-date-picker v-if="form.rentType == '2'"  type="year"  v-model="form.rentStartDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="租用结束日期" prop="rentEndDate" v-if="form.model == '1'  && form.rent=='1'">
        <el-date-picker v-if="form.rentType == '0'"  v-model="form.rentEndDate">
        </el-date-picker>
        <el-date-picker v-if="form.rentType == '1'" type="month"  v-model="form.rentEndDate">
        </el-date-picker>
        <el-date-picker v-if="form.rentType == '2'"  type="year"  v-model="form.rentEndDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="租金" prop="rentMoney" v-if="form.model == '1'  && form.rent=='1'">
        <el-input v-model="form.rentMoney" type="number"/>
      </el-form-item>
      <el-form-item label="平台抽成" prop="platformCommission" v-if="form.model == '1' && form.rent=='0'">
        <el-input v-model="form.platformCommission" type="number"/>
      </el-form-item>
      <el-form-item label="源码费用" prop="codeMoney" v-if="form.model == '0'">
        <el-input v-model="form.codeMoney" type="number"/>
      </el-form-item>
      <el-form-item label="维护费" prop="maintenanceFee"  v-if="form.model == '0'">
        <el-input v-model="form.maintenanceFee"  type="number"/>
      </el-form-item>
      <el-form-item label="维护开始日期" prop="maintenanceStartDate"  v-if="form.model == '0'">
        <el-date-picker v-model="form.maintenanceStartDate"/>
      </el-form-item>
      <el-form-item label="维护结束日期" prop="maintenanceEndDate"  v-if="form.model == '0'">
        <el-date-picker v-model="form.maintenanceEndDate"/>
      </el-form-item>
      <el-form-item label="所属店铺" prop="shopId">
        <el-select  v-model="form.shopId" placeholder="请选择店铺">
          <el-option
              v-for="item in shopinfoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-top:40px;">
        <el-button style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
        <el-button style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
        <el-button type="info"  @click="close" >取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script lang="ts" setup>
import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import {info,update,save} from '@/api/dineinordering/mangementmodel.ts'
import {shopinfolist} from '@/api/dineinordering/shopinfo.ts'
import {useUserStore} from "@/stores/user.ts";
const userStore = useUserStore()
const rent_type=userStore.getDictData('rent_type')
const code_manage_model=userStore.getDictData('code_manage_model')
const emit = defineEmits(['closeForm','success'])
const props = defineProps(['id','t'])
interface RuleForm {
  id:any,
  model:string,
  rent:string,
  rentType:string,
  rentMoney:number,
  platformCommission:number,
  codeMoney:number,
  maintenanceFee:number,
  maintenanceStartDate:null,
  maintenanceEndDate:null,
  rentStartDate:null,
  rentEndDate:null,
  shopId:null
}
const ruleFormRef = ref<FormInstance>()
const form = reactive<RuleForm>({
  id:null,
  model:'0',
  rent:'0',
  rentType:'0',
  rentMoney:0,
  platformCommission:0,
  codeMoney:0,
  maintenanceFee:0,
  maintenanceStartDate:null,
  maintenanceEndDate:null,
  rentStartDate:null,
  rentEndDate:null,
  shopId:null,
})
const shopinfoList = ref([])
const getShopInfoList=()=>{
  shopinfolist().then((res)=>{
    if(res.code === 200){
      shopinfoList.value = res.data;
    }
  })
}
onMounted(()=>{
  getShopInfoList()
})

watchEffect(()=>{
  const t = props.t
  console.log("t",t)
  if(props.id){
    info(props.id).then((res)=>{
      if(res.code === 200){
        form.id=res.data.id
        form.model=res.data.model
        form.rent=res.data.rent
        form.rentType=res.data.rentType
        form.rentMoney=res.data.rentMoney
        form.platformCommission=res.data.platformCommission
        form.codeMoney=res.data.codeMoney
        form.maintenanceFee=res.data.maintenanceFee
        form.maintenanceStartDate=res.data.maintenanceStartDate
        form.maintenanceEndDate=res.data.maintenanceEndDate
        form.rentStartDate=res.data.rentStartDate
        form.rentEndDate=res.data.rentEndDate
        form.shopId=res.data.shopId
      }
    })
  }
})

const rules = reactive<FormRules<RuleForm>>({
  model:[{required:true,message:'经营模式不能为空',trigger:'blur'}],
  codeMoney:[{required:true,message:'源码费用不能为空',trigger:'blur'}],
  rentStartDate:[{required:true,message:'开始日期不能为空',trigger:'blur'}],
  rentEndDate:[{required:true,message:'结束日期不能为空',trigger:'blur'}],
  rentMoney:[{required:true,message:'租金不能为空',trigger:'blur'}],
  shopId:[{required:true,message:'店铺不能为空',trigger:'blur'}],
})


const onSubmit =  (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid, fields) => {
    if (valid) {
      console.log('submit!')
      const code2 = ref();
      if(form.id != null){
        const {code} = await update(form);
        code2.value=code
      }else{
        const {code} = await save(form);
        code2.value=code
      }
      if(code2.value === 200){
        ElMessage({
          type:'success',
          message:'保存成功'
        })
        resetForm(ruleFormRef.value)
        emit('success')
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const close = ()=>{
  resetForm(ruleFormRef.value)
  emit('closeForm')
}
</script>

<style scoped>
.content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.userInfoContent{
  /* background-color: red; */
}
</style>